<template>
  <div id="name">  
      <div class="top_box">
          <div class="item" :class='[show=="1" ? "item_act" : ""]' @click="show_but(1)">{{ variable_name1 }}申诉</div>
           <div class="item" :class='[show=="2" ? "item_act" : ""]' @click="show_but(2)">{{ variable_name4 }}申诉</div>
      </div>     
      <one-representations  v-if="show == 1"> </one-representations>
      <two-representations v-if="show == 2"></two-representations>
  </div>
</template>

<script>
import OneRepresentations from '@/view/Aftersale/Representations/OneRepresentations'
import TwoRepresentations from '@/view/Aftersale/Representations/TwoRepresentations'
export default {
  name: 'name',
  data () {
    return {
        show:1,
    }
  },
   components:{
      OneRepresentations,
      TwoRepresentations,
  },
  created(){
      
  },
  mounted (){
      
  },
  methods: {
      show_but(num){
         this.show = num
      }
  }
}
</script>


<style scoped>
 .top_box{
     display: flex;
     justify-content: center;
     align-items: center;
     background-color:#F7F7FF;
     margin-left: -15px;
     margin-right: -15px;
     margin-top: -11px;
     margin-bottom: 15px;
  }
  .item{
     width: 180px;
     height: 40px;
     text-align: center;
     line-height:40px;
     color:#333333;   
     /* background: #FFFBF0; */
     margin-left: 5px;
     border-bottom:3px solid #D9DADC;
  }
  .item_act{
     color:#F6C54C;   
     background: #FFFBF0;
     border-bottom:3px solid#F6C54C;
  }
  .item:hover{
    cursor:pointer
   }
</style>
